<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入地址栏图标 -->
  <link rel="shortcut icon" href="/favicon.ico">
  <!-- 引入base样式文件 -->
  <link rel="stylesheet" href="/css/base.css">
  <!-- 引入css样式文件-->
  <link rel="stylesheet" href="/css/index.css">
<!-- 引入bootstrap文件 -->
<link rel="stylesheet" href="/lib/bootstrap-3.4.1-dist/css/bootstrap.css">
  <title>首页-绝地求生周边商城</title>
</head>

<body>
  <!-- 主容器 -->
  <div id="container">
    <!-- 网页头部 -->
    <header>
      
    </header>

    <!-- 网页内容 -->
    <main>
      <div class="container">
        <div class="banner-box">
          <div class="image-slide-box">
            <a class="slide-item" id="slide1">
              <img src="/images/Carouselmap-one.png" width="510"
                height="593" alt="轮播">
            </a>
            <a class="slide-item" id="slide2" style="display: none;">
              <img src="/images/Carouselmap-two.png" width="510"
                height="593" alt="轮播">
            </a>
            <div class="flash-bar">
              <div id="flash1" class="flash-show"></div>
              <div id="flash2" class="flash-hidden"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="item-box">
        <div class="item">
          <div class="item-title-box">
            <div class="item-title">PAI赛事限定</div>
            <a class="item-more">更多</a>
          </div>
          <ul class="mall-list clearfix">
            <li class="mall-item-box">
              <a class="mall-item">
                <img src="/images/PAI-imgs-one.webp" width="240" height="190" alt="商品图">
                <div class="mall-info">
                  <div class="mall-info-name">98k警告T恤</div>
                  <div class="mall-info-price">
                    <p class="mall-price-new">￥168</p>
                    <p class="mall-price-pre">￥238</p>
                  </div>
                </div>
              </a>
            </li>
            <li class="mall-item-box">
              <a class="mall-item">
                <img src="/images/PAI-imgs-2.webp" width="240" height="190" alt="商品图">
                <div class="mall-info">
                  <div class="mall-info-name">98k警告T恤</div>
                  <div class="mall-info-price">
                    <p class="mall-price-new">￥168</p>
                    <p class="mall-price-pre">￥238</p>
                  </div>
                </div>
              </a>
            </li>
            <li class="mall-item-box">
              <a class="mall-item">
                <img src="/images/PAI-imgs-3.webp" width="240" height="190" alt="商品图">
                <div class="mall-info">
                  <div class="mall-info-name">98k警告T恤</div>
                  <div class="mall-info-price">
                    <p class="mall-price-new">￥168</p>
                    <p class="mall-price-pre">￥238</p>
                  </div>
                </div>
              </a>
            </li>
            <li class="mall-item-box">
              <a class="mall-item">
                <img src="/images/PAI-imgs-4.webp" width="240" height="190" alt="商品图">
                <div class="mall-info">
                  <div class="mall-info-name">98k警告T恤</div>
                  <div class="mall-info-price">
                    <p class="mall-price-new">￥168</p>
                    <p class="mall-price-pre">￥238</p>
                  </div>
                </div>
              </a>
            </li>
            <li class="mall-item-box">
              <a class="mall-item">
                <img src="/images/PAI-imgs-5.webp" width="240" height="190" alt="商品图">
                <div class="mall-info">
                  <div class="mall-info-name">98k警告T恤</div>
                  <div class="mall-info-price">
                    <p class="mall-price-new">￥168</p>
                    <p class="mall-price-pre">￥238</p>
                  </div>
                </div>
              </a>
            </li>
            <li class="mall-item-box">
              <a class="mall-item">
                <img src="/images/PAI-imgs-6.webp" width="220" height="190" alt="商品图">
                <div class="mall-info">
                  <div class="mall-info-name">98k警告T恤</div>
                  <div class="mall-info-price">
                    <p class="mall-price-new">￥168</p>
                    <p class="mall-price-pre">￥238</p>
                  </div>
                </div>
              </a>
            </li>
          </ul>
          <div class="mall-ad-box">
            <img src="/images/p1.jpeg" width="1440" height="138" alt="定制">
          </div>
        </div>
        <div class="item">
          <div class="item-title-box">
            <div class="item-title">周年纪念礼盒</div>
            <a class="item-more">更多</a>
          </div>
          <div class="item-content">
            <a class="content-left">
              <img src="/images/ban-1.webp" width="900" height="400" alt="新品">
            </a>
            <ul class="content-right clearfix">
              <li>
                <a class="item-content-link">
                  <img src="/images/ban-2.webp" width="240" height="190" alt="商品图">
                  <div class="item-content-title">周年纪念礼盒</div>
                </a>
              </li>
              <li>
                <a class="item-content-link">
                  <img src="/images/ban-3.webp" width="240" height="190" alt="商品图">
                  <div class="item-content-title">周年纪念卫衣礼盒</div>
                </a>
              </li>
              <li>
                <a class="item-content-link">
                  <img src="/images/ban-4.webp" width="240" height="190" alt="商品图">
                  <div class="item-content-title">周年纪念鼠标垫礼盒</div>
                </a>
              </li>
              <li>
                <a class="item-content-link">
                  <img src="/images/ban-5.webp" width="240" height="190" alt="商品图">
                  <div class="item-content-title">周年典藏礼盒</div>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="item">
          <div class="item-title-box">
            <div class="item-title">推荐专区</div>
            <a class="item-more">更多</a>
          </div>
          <div class="item-content">
            <a class="content-left">
              <img src="/images/ban-6.webp" width="900" height="400" alt="新品">
            </a>
            <ul class="content-right clearfix">
              <li>
                <a class="item-content-link">
                  <img src="/images/ban-7.webp" width="240" height="190" alt="商品图">
                  <div class="item-content-title">98K警告T恤</div>
                </a>
              </li>
              <li>
                <a class="item-content-link">
                  <img src="/images/ban-8.webp" width="240" height="190" alt="商品图">
                  <div class="item-content-title">恐龙乐园T恤</div>
                </a>
              </li>
              <li>
                <a class="item-content-link">
                  <img src="/images/ban-8.webp" width="240" height="190" alt="商品图">
                  <div class="item-content-title">拳王爆炸头小黄衣</div>
                </a>
              </li>
              <li>
                <a class="item-content-link">
                  <img src="/images/ban-9.webp" width="240" height="190" alt="商品图">
                  <div class="item-content-title">周年纪念卫衣礼盒</div>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </main>

    <!-- 网页尾部 -->
    <footer>

    </footer>
    <!-- 回到顶部 -->
  <div class="topnav">
    <a href="#top"><i class="comicon btn-top"></i></a>

  </div>
  
    <!-- QQ登陆 -->
    <div class="koukou">
      <div class="chuangkou">
        <span class="guanbi">X</span>
        <h4>欢迎登陆</h4>
        <form action="#">
          <input type="text" placeholder="请输入QQ号/手机号">
          <input type="password" placeholder="请输入密码" autocomplete='tel'>
        </form>
        <button type="button" class="btn">提交</button>
      </div>
    </div>
  </div>


<script src="/lib/require/require.js" data-main="/js/index"></script>
  <!-- 轮播动画 -->
  <script>
    window.onload=function(){
        let $flash1 = document.getElementById('flash1')
        let $flash2 = document.getElementById('flash2')
        let $slide1 = document.getElementById('slide1')
        let $slide2 = document.getElementById('slide2')
        let count = 1
        $flash1.onclick = function() {
            count = 1
            $slide1.style.display = "block"
            $slide2.style.display = "none"

            $flash1.className = "flash-show"
            $flash2.className = "flash-hidden"
        }
        $flash2.onclick = function() {
            count = 2
            $slide2.style.display = "block"
            $slide1.style.display = "none"

            $flash1.className = "flash-hidden"
            $flash2.className = "flash-show"
        }

        var loop = setInterval(function() {
            if(count === 2) {
                count = 1
                $slide1.style.display = "block"
                $slide2.style.display = "none"

                $flash1.className = "flash-show"
                $flash2.className = "flash-hidden"
                count--
            }else {
                $slide2.style.display = "block"
                $slide1.style.display = "none"

                $flash1.className = "flash-hidden"
                $flash2.className = "flash-show"
                count++ 
            }
            // console.log(count)
        }, 2000)
    }
</script>

</body>

</html>